<template>
  <v-table ref="vtableRef" :columns="columns" :data="state.Data" />

  <div class="footer">
    <el-button type="primary" @click="submit">保存</el-button>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const vtableRef = ref()

  const columns = [
    { type: 'index', label: '序号', width: '50', align: 'center' },
    { label: '名称', prop: 'name', subassembly: 'ElInput' },
    { label: 'date', prop: 'date', subassembly: 'ElInput' },
    { label: 'address', prop: 'address', subassembly: 'ElInput' },
  ]

  const state = ref({
    Data: [
      { date: '2016-05-01', name: '', address: 'No. Angeles', edit: true, namerequired: true },
      { date: '', daterequired: true, name: 'Rollen', edit: true, address: 'No. 189, Grove St, Los Angeles' },
      { date: '2016-05-03', name: 'Joke', address: '', edit: true, addressrequired: true },
      { date: '2016-05-04', name: 'TIM', address: 'No. 189, Grove St, Los Angeles' },
    ],
  })

  const submit = async () => {
    const flag = await vtableRef.value!.validate()
    console.log(`output->flag`, flag)
  }
</script>
<style lang="scss" scoped>
  .footer {
    margin: 2rem auto 0;
    text-align: center;
  }
</style>
